<template>
  <view class="my">
    <view class="my-box">
      <view class="user-msg">
        <image class="img" :src="avatar" mode="aspectFit"></image>
        <view class="user-name" style="margin-left: 10px;width: 600rpx;">
          <text style="font-weight: 700;font-size: 30rpx;">{{nickname}}(id:{{uid}})</text>
          <view class="d-flex" style="margin-top: 10rpx;display: flex;justify-content: space-between;">
            <view style="padding-top:4px ;">{{phone}}</view>
            <view style="padding-top:4px;margin-right: 30rpx;">剩余积分：<span style="color: red;">{{integral}}</span></view>
          </view>
        </view>
      </view>
      <!-- 积分充值 begin-->
      <view>
        <view class="m-integral">
          <view class="m-integral-img">
            <image src="@/static/img/vip.png"></image>
            <view class="m-text">
              <view>充值积分</view>
              <view style="color: red;">剩余积分为{{integral}}</view>
            </view>
          </view>
          <view class="m-btn" @click="recharge">
            <span>立即充值</span>
          </view>
        </view>
      </view>
      <!-- 积分充值 end-->
      <view class="data-msg">
        <view class="msg-content" @click="calltransfer()">
          <u-icon name="phone" color="#393939" size="28"></u-icon>
          <text style="margin-left: -295rpx; font-size: 30rpx;" @click="calltransfer()">呼叫转移设置</text>
          <u-icon name="arrow-right" color="#393939" size="18"></u-icon>
        </view>
        <button class="msg-content" open-type="contact">
          <u-icon name="kefu-ermai" color="#393939" size="24"></u-icon>
          <text style="margin-left: -350rpx; font-size: 30rpx;">联系客服</text>
          <u-icon name="arrow-right" color="#393939" size="18"></u-icon>
        </button>
        <view class="msg-content" @click="logout">
          <u-icon name="minus-circle" color="#393939" size="22"></u-icon>
          <text style="margin-left: -350rpx; font-size: 30rpx;">退出登录</text>
          <u-icon name="arrow-right" color="#393939" size="18"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  import Cache from '@/utils/cache';
  import {
    BACK_URL
  } from '@/config/cache';
  import {
    getMenuList,
    getUserInfo
  } from '@/api/user.js';
  import {
    orderData
  } from '@/api/order.js';
  import {
    toLogin
  } from '@/libs/login.js';
  import {
    getCity
  } from '@/api/api.js';
  import {
    mapGetters
  } from "vuex";
  // #ifdef H5
  import Auth from '@/libs/wechat';
  // #endif
  // #ifdef MP
  import authorize from '@/components/Authorize';
  // #endif
  const app = getApp();
  export default {
    // components: {
    // 	// #ifdef MP
    // 	authorize
    // 	// #endif
    // },
    computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
    data() {
      return {
        orderMenu: [{
            img: '/static/images/order1.png',
            title: '待付款',
            url: '/pages/users/order_list/index?status=0',
            num: 0
          },
          {
            img: '/static/images/order2.png',
            title: '待发货',
            url: '/pages/users/order_list/index?status=1',
            num: 0
          },
          {
            img: '/static/images/order3.png',
            title: '待收货',
            url: '/pages/users/order_list/index?status=2',
            num: 0
          },
          {
            img: '/static/images/order4.png',
            title: '待评价',
            url: '/pages/users/order_list/index?status=3',
            num: 0
          },
          {
            img: '/static/images/order5.png',
            title: '售后/退款',
            url: '/pages/users/user_return_list/index',
            num: 0
          },
        ],
        imgUrls: [],
        userMenu: [],
        autoplay: true,
        circular: true,
        interval: 3000,
        duration: 500,
        isAuto: false, //没有授权的不会自动授权
        isShowAuth: false, //是否隐藏授权
        orderStatusNum: {},
        MyMenus: [],
        wechatUrl: [],
        servicePic: '/static/images/customer.png',
        sysHeight: sysHeight,
        // #ifdef MP
        pageHeight: '100%',
        // #endif
        // #ifdef H5
        pageHeight: app.globalData.windowHeight,
        // #endif
        // #ifdef H5
        isWeixin: Auth.isWeixin(),
        //#endif
        nickname: '',
        phone: '',
        avatar: '',
        integral: 0,
        uid:''
      }
    },
    onLoad() {
      let that = this;
      // #ifdef H5
      that.$set(that, 'pageHeight', app.globalData.windowHeight);
      // #endif
      that.$set(that, 'MyMenus', app.globalData.MyMenus);
      if (!this.$Cache.has('cityList')) this.getCityList();
      if (that.isLogin == false) {
        // #ifdef H5
        toLogin()
        // #endif
      }
    },
    onShow: function() {
      let that = this;
      // #ifdef H5
      uni.getSystemInfo({
        success: function(res) {
          that.pageHeight = res.windowHeight + 'px'
        }
      });
      // #endif
      if (that.isLogin) {
        this.getMyMenus();
        // this.setVisit();
        this.getOrderData();
        this.$store.dispatch('USERINFO');
      } else {
        toLogin();
      }
      // 获取用户信息
      this.getUserInfo()
    },
    methods: {
      //  呼叫转移
      calltransfer() {
        uni.navigateTo({
          url: '../calltransfer/calltransfer'
        })
      },
      //退出登录
      logout() {
        toLogin();
        // uni.navigateTo({
        // 	url: '/pages/users/login/index'
        // })
      },
      getUserInfo() {
        getUserInfo().then(res => {
          this.nickname = res.data.nickname
          this.avatar = res.data.avatar
          this.phone = res.data.phone
          this.integral = res.data.integral
          this.uid = res.data.uid
        })
      },
      // 记录会员访问
      // setVisit(){
      // 	setVisit({
      // 		url:'/pages/user/index'
      // 	}).then(res=>{})
      // },
      navito(e) {
        window.location.href = 'https://' + e;
      },
      kefuClick() {
        location.href = this.chatUrl;
      },
      getOrderData() {
        let that = this;
        orderData().then(res => {
          that.orderMenu.forEach((item, index) => {
            switch (item.title) {
              case '待付款':
                item.num = res.data.unPaidCount
                break
              case '待发货':
                item.num = res.data.unShippedCount
                break
              case '待收货':
                item.num = res.data.receivedCount
                break
              case '待评价':
                item.num = res.data.evaluatedCount
                break
              case '售后/退款':
                item.num = res.data.refundCount
                break
            }
          })
          that.$set(that, 'orderMenu', that.orderMenu);
        })
      },
      // 打开授权
      openAuto() {
        Cache.set(BACK_URL, '')
        toLogin();
      },
      // 授权回调
      onLoadFun() {
        this.getMyMenus();
        // this.setVisit();
        this.getOrderData();
      },
      Setting: function() {
        uni.openSetting({
          success: function(res) {
            console.log(res.authSetting)
          }
        });
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e
      },
      // 绑定手机
      bindPhone() {
        uni.navigateTo({
          url: '/pages/users/app_login/index'
        })
      },
      /**
       *
       * 获取个人中心图标
       */
      getMyMenus: function() {
        let that = this;
        if (this.MyMenus.length) return;
        getMenuList().then(res => {
          that.$set(that, 'MyMenus', res.data.routine_my_menus);
          that.wechatUrl = res.data.routine_my_menus.filter((item) => {
            return item.url.indexOf('service') !== -1
          })
          res.data.routine_my_menus.map((item) => {
            if (item.url.indexOf('service') !== -1) that.servicePic = item.pic
          })
          if (res.data.routine_my_banner) {
            that.imgUrls = res.data.routine_my_banner
          }
        });
      },
      // 编辑页面
      goEdit() {
        if (this.isLogin == false) {
          toLogin();
        } else {
          uni.navigateTo({
            url: '/pages/users/user_info/index'
          })
        }
      },
      // 签到
      goSignIn() {
        uni.navigateTo({
          url: '/pages/users/user_sgin/index'
        })
      },
      // goMenuPage
      goMenuPage(url) {
        if (this.isLogin) {
          uni.navigateTo({
            url
          })
        } else {
          // #ifdef MP
          this.openAuto()
          // #endif
        }
      },
      // 获取地址数据
      getCityList: function() {
        let that = this;
        getCity().then(res => {
          let oneDay = 24 * 3600 * 1000;
          this.$Cache.setItem({
            name: 'cityList',
            value: res.data,
            expires: oneDay * 7
          }); //设置七天过期时间
        })
      },
      // 立即充值
      recharge() {
        uni.navigateTo({
          url: '/pages/recharge/recharge'
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-integral {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0 20rpx;
    margin-top: 100rpx;
  }

  .m-integral-img {
    display: flex;
    margin-left: 40rpx;
  }

  .m-integral-img image {
    margin-top: 10rpx;
    width: 124rpx;
    height: 80rpx;
  }

  .m-text {
    font-size: 25rpx;
    margin-left: 30rpx;
    margin-top: 20rpx;
  }

  .m-btn {
    width: 178rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #AB7500;
    color: #FFDB8E;
    margin: 20rpx;
    position: relative;
  }

  .m-btn span {
    position: absolute;
    top: 10rpx;
    left: 33rpx;
  }

  .my {
    .my-box {
      width: 100%;
      height: 500rpx;
      background: linear-gradient(180deg, #3055C8, #f7f7f7);

      .data-msg {
        margin: 0 20rpx;
        margin-top: 20rpx;
        height: 500rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 40rpx;

        .msg-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          border-bottom: 5rpx solid #eee;
        }
      }

      .user-msg {
        display: flex;
        flex-direction: row;
        margin-left: 20rpx;
        height: 200rpx;
        padding-top: 160rpx;

        .img {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background-color: skyblue;
        }

        .user-name {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
</style>